<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>JQuery轮播图</title>
    <link type="text/css" rel="styleSheet"  th:href="@{../static/css/carouselMap.css}" />
</head>

<body>
<div class="container">
    <div class="list" style="left:0px;">
        <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
        <img th:src="@{../static/img/student_log_bg.jpg}" alt="1"/>
        <img th:src="@{../static/img/admin_log_bg.jpeg}" alt="2"/>
        <img th:src="@{../static/img/teacher_log_bg.jpeg}" alt="3"/>
        <img th:src="@{../static/img/student_log_bg.jpg}" alt="4"/>
        <img th:src="@{../static/img/admin_log_bg.jpeg}" alt="5"/>
        <!--<img src="../static/image/banner.jpg" alt="1"/>-->
    </div>
    <div class="pointer">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>

</div>

<script th:src="@{../static/js/jquery-3.5.1.js}"></script>
<script>
    var imgCount = 5;
    var index = 1;
    var intervalId;
    var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
    //自动轮播功能 使用定时器
    autoNextPage();
    function autoNextPage(){
        intervalId = setInterval(function(){
            nextPage(true);
        },3000);
    }
    //当鼠标移入 停止轮播
    $('.container').mouseover(function(){
        console.log('hah');
        clearInterval(intervalId);
    });
    // 当鼠标移出，开始轮播
    $('.container').mouseout(function(){
        autoNextPage();
    });
    //点击下一页 上一页的功能
    $('.left').click(function(){
        nextPage(true);
    });
    $('.right').click(function(){
        nextPage(false);
    });
    //小圆点的相应功能 事件委托
    clickButtons();
    function clickButtons(){
        var length = buttonSpan.length;
        for(var i=0;i<length;i++){
            buttonSpan[i].onclick = function(){
                $(buttonSpan[index-1]).removeClass('on');
                if($(this).attr('index')==1){
                    index = 5;
                }else{
                    index = $(this).attr('index')-1;
                }
                nextPage(true);

            };
        }
    }
    function nextPage(next){
        var targetLeft = 0;
        //当前的圆点去掉on样式
        $(buttonSpan[index-1]).removeClass('on');
        if(next){//往后走
            if(index == 5){//到最后一张，直接跳到第一张
                targetLeft = 0;
                index = 1;
            }else{
                index++;
                targetLeft = -700*(index-1);
            }

        }else{//往前走
            if(index == 1){//在第一张，直接跳到第五张
                index = 5;
                targetLeft = -700*(imgCount-1);
            }else{
                index--;
                targetLeft = -700*(index-1);
            }

        }
        $('.list').animate({left:targetLeft+'px'});
        //更新后的圆点加上样式
        $(buttonSpan[index-1]).addClass('on');


    }


</script>
</body>

</html>